function calculateSum(arr) {
    var sum = 0;
    for (var i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}

document.addEventListener("DOMContentLoaded", function () {
    let context = $("#stat_chart").get(0).getContext('2d');

    let labels = JSON.parse(context.canvas.dataset.dates);
    let registered_users = JSON.parse(context.canvas.dataset.registered_users);
    let proxies_created = JSON.parse(context.canvas.dataset.proxies_created);
    let orders_created = JSON.parse(context.canvas.dataset.orders_created);
    let servers_added = JSON.parse(context.canvas.dataset.servers_added);
    let mobile_proxies_bought = JSON.parse(context.canvas.dataset.mobile_proxies_bought);
    let server_proxies_bought = JSON.parse(context.canvas.dataset.server_proxies_bought);
    let payments_payed = JSON.parse(context.canvas.dataset.payments_payed);
    let messages_sent = JSON.parse(context.canvas.dataset.messages_sent);

    let chart
    chart = new Chart(context, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: "Registered users",
                data: registered_users,
                fill: true,
                lineTension: 0.2,
                backgroundColor: "rgba(54, 162, 235, 0.5)",
                borderColor: "rgb(54, 162, 235)",
                borderWidth: 1.2
            },
                {
                    label: "Proxies created",
                    data: proxies_created,
                    fill: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(104, 107, 255, 0.5)",
                    borderColor: "rgb(104, 107, 255)",
                    borderWidth: 1.2
                },
                {
                    label: "Orders created",
                    data: orders_created,
                    fill: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(160, 64, 255, 0.5)",
                    borderColor: "rgb(160, 64, 255)",
                    borderWidth: 1.2
                },
                {
                    label: "Servers added",
                    data: servers_added,
                    fill: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(48, 198, 124, 0.5)",
                    borderColor: "rgb(48, 198, 124)",
                    borderWidth: 1.2
                },
                {
                    label: "Mobile proxies bought",
                    data: mobile_proxies_bought,
                    fill: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(242,146,237, 0.5)",
                    borderColor: "rgb(242,146,237)",
                    borderWidth: 1.2
                },
                {
                    label: "Server proxies bought",
                    data: server_proxies_bought,
                    fill: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(228,233,93, 0.5)",
                    borderColor: "rgb(228,233,93)",
                    borderWidth: 1.2
                },
                {
                    label: "Payments payed",
                    data: payments_payed,
                    fill: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(255, 51, 51, 0.5)",
                    borderColor: "rgb(255, 51, 51)",
                    borderWidth: 1.2
                },
                {
                    label: "Messages sent",
                    data: messages_sent,
                    fill: true,
                    lineTension: 0.2,
                    backgroundColor: "rgba(26, 140, 206, 0.5)",
                    borderColor: "rgb(26, 140, 206)",
                    borderWidth: 1.2
                },
            ]
        },
        options: {
            responsive: true
        },
    })

    $("#changeDateButton").click(() => {
        let data = {date_from: $('#datefrom').val(), date_to: $('#dateto').val()};
        var response = $.post("/get_stats", data)
        response.done(function (chartData) {
            chart.data.labels = chartData.dates
            chart.data.datasets[0].data = chartData.data.registered_users
            chart.data.datasets[1].data = chartData.data.proxies_created
            chart.data.datasets[2].data = chartData.data.orders_created
            chart.data.datasets[3].data = chartData.data.servers_added
            chart.data.datasets[4].data = chartData.data.mobile_proxies_bought
            chart.data.datasets[5].data = chartData.data.server_proxies_bought
            chart.data.datasets[6].data = chartData.data.payments_payed
            chart.data.datasets[7].data = chartData.data.messages_sent
            chart.update();

            try {
                $("#proxies_created").text(calculateSum(chartData.data.proxies_created));
                $("#registered_users").text(calculateSum(chartData.data.registered_users));
                $("#servers_added").text(calculateSum(chartData.data.servers_added));
                $("#orders_created").text(calculateSum(chartData.data.orders_created));
            } catch (e) {
                console.log(e);
            }

            $('#table_stats').find('tbody')[0].innerHTML = '';
            var dates = chartData.dates;
            var column_data = chartData.data.table_rows;
            var rows_sums = chartData.data.rows_sums;

            var tab = []
            for (var i = 0; i < column_data.length - 1; i++) {
                tab += '<tr>'
                tab += '<td>' + dates[i] + '</td>'
                column_data[i].forEach(function (item) {
                    tab += '<td>' + item + '</td>'
                })
                tab += '</tr>'
            }

            tab += '<tr>'
            tab += '<td> Total: </td>'
            rows_sums.forEach(function (item) {
                tab += '<td>' + item + '</td>'
            })

            tab += '</tr>'

            $('#table_stats').find('tbody')[0].innerHTML = tab;
        });
    });
});